import CardView from "@/components/CardView";
import PageTitle from "@/components/PageTitle";
import { defineComponent, reactive, ref } from "vue";
import bgIcon from "./assets/bg-icon.png";
import pIcon from "./assets/p-icon.png";
import tIcon from "./assets/t-icon.png";
import fIcon from "./assets/f-icon.png";
import bgxhIcon from "./assets/bgxh-icon.png";
import BackGroundImage from "@/components/BackGroundImage";
import InfoCellGray from "@/components/InfoCellGray";
import RoundInfo from "@/components/RoundInfo";
import FilterMenuSearch from "@/components/FilterMenuSearch";
import { useRequest } from "./request";
import TextView from "@/components/TextView";
import RoundEdgeButtonGroup from "@/components/RoundEdgeButtonGroup";
import ButtonView from "@/components/ButtonView";
import {
  getUserInfoUrl,
  getUserTypeValue,
  phoneClick,
  isDh,
} from "@/command/apiTool";
import MessageCard from "@/components/MessageCard";
import { Switch } from "vant";
import { ILabelProps } from "@/components/Label/types";
import ListView from "@/components/ListView";
import { IFilterMenuChoose } from "@/components/FilterMenu/types";
import { useRouter } from "vue-router";
import ColView from "@/components/ColView";
import { getAction } from "@/command/netTool";
import FixButtonGroup from "@/components/FixButtonGroup";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import IconText from "@/components/IconText";
import time from "@/assets/image/time.png";
export default defineComponent({
  setup(props, {}) {
    const userInfo = localStorage.getItem("userInfo") as string;
    const userInfoJSON = JSON.parse(userInfo) as any;
    const router = useRouter();
    const form = ref({ userName: "" });
    const { page, checked, newInfoList, applyNews, applyWork, statsInfo } =
      useRequest();
    //swich

    //大户

    const renderItem1 = (e: any) => {
      const data = {
        title: e.userName,
        text: "空闲时间：" + e.freeDay + "天",
        src: e.logoUrl,
      };
      return (
        <div class={"pb-10 w-full"}>
          <InfoCellGray
            {...data}
            right={() => (
              <span class="text-[#F16A39]">
                {e.workPrice !== "面议" ? e.workPrice + "元/人/天" : "面议"}
              </span>
            )}
          >
            <TextView>{e.area + " " + e.town}</TextView>
            <ButtonView onClick={() => phoneClick(e.phone)}>联系TA</ButtonView>
          </InfoCellGray>
          <div class={"h-[1px] bg-gray-200  mt-6"}></div>
        </div>
      );
    };
    const renderDH = () => {
      const data: IFilterMenuChoose[] = [
        {
          type: "area",
          key: "areaCode",
        },
        // {
        //   type: "datePicker",
        //   key: "date",
        // },
        {
          type: "idleTime",
          key: "freeDate",
        },
      ];

      return (
        <div>
          <CardView class={"!px-0 !py-0"}>
            <div
              class="p-[12px] box-border flex items-center justify-center   flex-col m-child-top-20"
              style={{
                backgroundImage: `url(${bgIcon})`,
                backgroundSize: "100% 100%",
              }}
            >
              <div class={"w-full"}>
                <div class={"flex mb-13 ml-5"}>
                  <div
                    class={"text-12"}
                    onClick={() => router.push("/employmentRecords")}
                  >
                    <img
                      src={tIcon}
                      alt=""
                      class={"w-[34px] h-[34px] ml-5 mb-4"}
                    />
                    <div>用工记录</div>
                  </div>
                  <div
                    class={"ml-[34px] text-12"}
                    onClick={() => router.push("/sendRecords")}
                  >
                    <img
                      src={fIcon}
                      alt=""
                      class={"w-[34px] h-[34px] ml-5 mb-4"}
                    />
                    <div class={"w-full"}>发布记录</div>
                  </div>
                </div>
                <CardView title="申请列表" class={" w-full"}>
                  <div
                    class={"flex justify-between"}
                    onClick={() =>
                      router.push(`/applicationList?id=${applyNews.value.id}`)
                    }
                  >
                    <RoundInfo
                      class={"!text-16"}
                      {...{
                        text: `用户${applyNews.value.phone}向您发了一个用工申请`,
                      }}
                    ></RoundInfo>
                    <div class={"text-[16px] text-gray-400"}>
                      {applyNews.value.beforeTime}
                    </div>
                  </div>
                </CardView>
              </div>
            </div>
            <FilterMenuSearch
              modelValue={form.value}
              searchKey="title"
              choose={data}
            />
            <CardView title="用工列表">
              <ListView
                {...getUserInfoUrl(
                  {
                    dh: "/api/H5/service/helpWork/heavy/listFreeUser",
                    xh: "",
                  },
                  form.value
                )}
                ref={page}
                type="page"
                renderItem={renderItem1}
                class={"pt-[20px]"}
              />
            </CardView>
          </CardView>
        </div>
      );
    };

    //小户
    const renderItem2 = (e: any) => {
      const data: any = {
        title: e.title,
        data: [
          {
            name: "类型",
            value: e.workName,
          },
          {
            name: "用工时间",
            value: e.workDay,
          },
        ],
        text: (
          <div class="text-[#FE8923] text-[15px]">{`${e.workPrice}元/人/天`}</div>
        ),
        src: e.logoUrl,
      };
      if (e.teamFlag == "1") {
        data.labels = [
          {
            name: "结队大户",
            type: "blue",
          },
        ];
      }
      const buttons = [
        {
          text: "联系大户",
          onClick: () => {
            phoneClick(e.phone);
          },
        },
        {
          text: "申请用工",
          onClick: () => applyWork(e.id),
          display: e.applyFlag == "0",
        },
      ].filter((e) => (e.display == undefined ? true : e.display));
      return (
        <CardView class={"py-10"}>
          <InfoCellGray {...data}>
            <TextView>{e.area + " " + e.town}</TextView>
            <RoundEdgeButtonGroup data={buttons} />
          </InfoCellGray>
          <div class={"h-[1px] bg-gray-200 "}></div>
        </CardView>
      );
    };

    const renderxh = () => {
      const data1: IFilterMenuChoose[] = [
        {
          type: "area",
          key: "areaCode",
        },
        {
          type: "productType",
          key: "plantType",
          title: "种植品种",
        },
        {
          type: "workType",
          key: "workType",
          title: "类型",
        },
      ];
      const data = reactive([{ text: "", time: "" }]);
      data[0].text = `用户${newInfoList.value.phone}在平台上发布了用工需求`;
      data[0].time = newInfoList.value.beforeTime;
      // const data = [
      //   {
      //     text: ,
      //     time: newInfoList.value.beforeTime,
      //   },
      //   {
      //     text: "用户133***7455在平台上发布了用工需求",
      //     time: "2小时前",
      //   },
      // ];
      return (
        <CardView class={"!px-0 !py-0 !h-[94vh]"}>
          <div
            class="h-[228px] p-[12px] box-border w-full   m-child-top-20"
            style={{
              backgroundImage: `url(${bgxhIcon})`,
              backgroundSize: "100% 100%",
            }}
          >
            <div class={"w-full flex justify-between items-center px-20"}>
              <img src={pIcon} alt="" class={"w-[87px]"} />
              <div
                onClick={() => {
                  if (statsInfo.value.status == "0") {
                    setTimeout(() => {
                      router.push(`/helpWorkDetail`);
                    }, 500);
                  }
                }}
              >
                <div class={"mb-23 text-24 mt-10"}>{userInfoJSON.name}</div>
                <div
                  class={
                    "bg-white w-[142px] rounded-b-3xl pl-10 mt-15 flex items-center"
                  }
                  style={{ borderRadius: "50px" }}
                >
                  <div class={"flex items-center py-8"}>
                    <div
                      class={" rounded-100 h-[8px] w-[8px] mr-5"}
                      style={{
                        backgroundColor: checked.value ? "#4485FF" : "#E9E9EB",
                      }}
                    ></div>
                    <span class={"text-12 mr-5"}>
                      状态：{checked.value ? "空闲" : "忙碌"}
                    </span>
                  </div>
                  <Switch
                    disabled={!checked.value}
                    class={"h-5"}
                    v-model={checked.value}
                    size="20px"
                  />
                </div>
              </div>
            </div>
            <MessageCard data={data} />
          </div>
          <CardView title="用工列表" class={"pt-0 "}>
            <FilterMenuSearch
              modelValue={form.value}
              searchKey="title"
              choose={data1}
            />
            <ListView
              {...getUserInfoUrl(
                {
                  dh: "",
                  xh: "/api/H5/service/helpWork/small/listWork",
                },
                form.value
              )}
              ref={page}
              type="page"
              renderItem={renderItem2}
            />
          </CardView>
        </CardView>
      );
    };
    const render4 = () => {
      const data: IButtonGroupViewData[] = [
        {
          text: "发布用工需求",
          block: true,
          childClass: "!h-[40px]",
          onClick: () => {
            router.push("/sedNeedEmploying");
          },
        },
      ];
      return <FixButtonGroup data={data} />;
    };

    return () => {
      return (
        <PageTitle
          title="帮用工"
          right={() =>
            !isDh() ? (
              <IconText
                url={time}
                text="帮工记录"
                class="header-right"
                onClick={() => router.push("/helpRecords")}
              />
            ) : (
              <div></div>
            )
          }
        >
          <div class={"h-full"}>
            {getUserTypeValue() == "dh" ? renderDH() : renderxh()}
          </div>
          {isDh() && render4()}
        </PageTitle>
      );
    };
  },
});
